<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<meta name="viewport" content="height=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
		<title>兴龙商务</title>
		<style type="text/css">
			body {
				font-size: 1em;
				font-family: "Microsoft YaHei";
				color: #535353;
				box-sizing: border-box;
			}

			* {
				margin: 0;
				padding: 0;
			}

			a {
				text-decoration: none;
				color: #374782;
			}

			input {
				outline: none;
			}

			html,
			body {
				height: 100%;
				overflow: hidden;
				scroll-behavior: smooth;
			}
		</style>
		<style type="text/css">
			body {
				background: #efeff4;
				width: 100%;
				height: 100%;
			}

			.regTop {
				width: 100%;
				padding: 8% 0 6%;
				background: #50b4f9;
				text-align: center;
				color: #ffffff;
				position: relative;
			}

			.back {
				position: absolute;
				left: 5%;
				top: 50%;
				color: #ffffff;
			}

			.point {
				padding: 6% 5%;
			}

			.content form input:not(:nth-child(6)) {
				border: 0;
				border-bottom: 1px solid #c3c3c5;
			}

			.content form {
				width: 100%;
				height: 35.21%;
			}

			.message {
				background: #ffffff;
				padding: 2% 5% 0 5%;
				position: relative;
			}

			.message input {
				width: 90%;
				padding: 4% 0 4% 10%;
				font-size: 0.875em;
				font-family: "Microsoft YaHei";
			}

			.message .icons b {
				position: absolute;
				width: 3.75%;
				height: 4%;
				top: 7%;
				left: 7%;
			}

			.message .icons b img {
				width: 100%;
			}

			.message .icons b:nth-child(2) {
				width: 5%;
				top: 26%;
				left: 6%;
			}

			.message .icons b:nth-child(3) {
				top: 43%;
			}

			.message .icons b:nth-child(4) {
				top: 61%;
			}

			.code {
				position: absolute;
				top: 60%;
				right: 10%;
				color: #21a9f5;
				font-size: 0.875em;
				font-family: "Microsoft YaHei";
			}

			select {
				width: 33%;
				padding: 2% 1%;
				margin: 5%;
				font-size: 1em;
				color: #909093;
				border: solid 1px #909093;
				font-family: "Microsoft YaHei";
			}

			.agree {
				margin: 6% 5%;
			}

			.submit {
				width: 84%;
				margin: 2% 8%;
				background: #21a9f5;
				color: #ffffff;
				border: 0;
				padding: 3.25% 0;
				font-size: 1em;
				font-family: "Microsoft YaHei";
			}

			form .agree input[type="checkbox"] :default {
				outline: 2px solid #21a9f5;
			}

			.mark {
				display: none;
				position: fixed;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				margin: auto;
				height: 1.08rem;
				line-height: 0.88rem;
				width: 80%;
				text-align: center;
				font-size: 0.28rem;
				color: #fff;
				background: rgba(0, 0, 0, 0.6);
				border-radius: 0.1rem;
			}

			.img-xys {
				margin-top: 2rem;
				margin-left: 1.25rem;
				margin-right: 1.25rem;
				margin-bottom: 0.5rem;
				display: inline-block;
				height: auto;
				max-width: 90%;
			}
		</style>

	</head>
	<body>
		<div class="register">
			<div class="regTops">
				<img class="img-xys" src="./img/LOGO.png">
				<!-- <a class="back" href="index.html">&lt;&nbsp;返回</a> -->
			</div>
			<div class="content">
				<div class="point">
					<!-- <span>注册成功后，手机号也可为登录账号。</span> -->
					</divå>
					<form action="">
						<div class="message">
							<input type="tel" id="phone" placeholder="输入手机号" pattern="[0-9]{11}" required />
							<input type="password" id="password" placeholder="请输入6-25位密码" pattern="[0-9A-Za-z]{6,25}" required />
							<input type="password" id="password2" placeholder="请再次输入密码" pattern="[0-9A-Za-z]{6,25}" required />
							<input type="text" id="coder" placeholder="输入验证码" pattern="[0-9]{6}" required />
							<!-- <select name="job">
		                        <option value="choose">选择职位</option>
		                        <option value="boss">老板</option>
		                        <option value="staff">员工</option>
		                    </select> -->
							<!-- <div class="icons">
		                        <b><img src="images/zc-1.jpg" alt=""/></b>
		                        <b><img src="images/zc-2.jpg" alt=""/></b>
		                        <b><img src="images/zc-3.jpg" alt=""/></b>
		                        <b><img src="images/zc-3.jpg" alt=""/></b>
		                    </div> -->
							<a class="code" id="coderA" href="javascript:;" onclick="codeClick()">获取验证码</a>
						</div>
						<div class="agree">
							<input type="checkbox"/ onclick="treatyClick()"><span>&nbsp;同意&nbsp;</span><a href="http://api.bjxlxd.com/registerProtocol.html">《注册协议》</a>
						</div>
						<button class="submit" type="button" onclick="registerClick()">注册</button>
					</form>

				</div>
			</div>
	</body>

	<!-- <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> -->
	<!-- <script src="https://code.jquery.com/jquery-3.3.1.js"></script> -->
	<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
	<script type="text/javascript">
		window.onload = function() {
			window.alert = function(name) {
				var iframe = document.createElement("IFRAME");
				iframe.style.display = "none";
				// iframe.innerText = '提示';
				iframe.setAttribute("src", 'data:text/plain');
				document.documentElement.appendChild(iframe);
				window.frames[0].window.alert(name);
				iframe.parentNode.removeChild(iframe);
			}
		}
		var isCheckbox = false;
		var isTimer = true;

		function testNetRequest(url, datas, success) {
			console.log('2注册');
			var kBaseUrl = "http://api.bjxlxd.com/api";
			$.ajax({
				type: "post",
				url: kBaseUrl + url,
				data: datas,
				// dataType: 'json',
				// contentType: 'application/json',
				success: success,
				error: function(data) {
					console.log(data);
					alert('4');
				}
			});
		}

		function treatyClick() {

			if (isCheckbox) {
				console.log(isCheckbox + "1");
				isCheckbox = false; //设置为未选中状态
			} else {
				console.log(isCheckbox + "2");
				isCheckbox = true; //设置为选中状态
			}
		}

		function registerClick() {
			// window.location.href="https://www.pgyer.com/xlxd"; 

			var _search = window.location.search;

			_search = _search.split('=');
			// console.log(_search[1]);
			// alert(_search[1]);
			var phone = $('#phone').val();
			var msgCode = $('#coder').val();
			var password = $('#password').val();
			var password2 = $('#password2').val();

			if (!isCheckbox) {
				alert('请同意注册协议');
				return;
			}
			console.log(isCheckbox);

			var requestData = {
				"status": 1,
				"identity": 4,
				"phone": phone,
				"password": password,
				"msgCode": msgCode,
				"uid": _search[1]
			};

			console.log(requestData);
			testNetRequest('/register', requestData, function(data) {
				if (data['data']['code'] == 0) {
					alert('恭喜您！注册成功');
					//data['data']['msg']
					window.location.href = "https://www.pgyer.com/xlxd";
				} else {
					alert('恭喜您！注册成功');
					window.location.href = "https://www.pgyer.com/xlxd";
				}
			});

		}

		function codeClick() {
			if (isTimer == false) {
				return;
			}

			var phone = $('#phone').val();
			if (!(/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(phone))) {
				alert("手机号码有误，请重填" + phone);
				return false;
			}
			console.log('验证码' + phone);

			var requestData = {
				"phone": phone,
				"template": "2"
			};
			testNetRequest('/getMsgCode', requestData, function(data) {
				if (data['data']['code'] == 0) {
					alert(data['data']['msg']);
				} else {

				}

				console.log(data);
			});
			isTimer = false;

			time(document.getElementById("coderA"));
		}


		//60秒之后获取验证码
		var wait = 60;

		function time(obj) {
			if (wait == 0) {
				obj.removeAttribute("disabled");
				obj.innerHTML = "获取验证码";
				wait = 60;
				isTimer = true;
			} else {
				obj.setAttribute("disabled", true);
				obj.innerHTML = wait + "秒后重新发送";
				wait--;
				setTimeout(function() {
						time(obj)
					},
					1000)
			}
		}
		// function alert(str) {
		//   var div = '<div class="mark"></div>';
		//   $('body').append(div)
		//   $('.mark').html(str);
		//   $('.mark').show();
		//   setTimeout(function() {
		//     $('.mark').hide();
		//     $('.mark').remove();
		//   }, 2500)
		// }
	</script>
</html>
